<template>
  <div class="deviceWrap">
    <StatusTip v-if="pageTip.show" :status="pageTip.status"></StatusTip>
    <template v-else>
      <Tree
        class="tree"
        parentId="parentId"
        name="enterpriseName"
        children="children"
        id="id"
        :treeData="resData"
        @onChecked="handleChecked"
        @onSelected="handleSelected"
      ></Tree>
      <GMap
        class="mapComponent"
        :checkedKeys="checkedKeys"
        :selectedKeys="selectedKeys"
        :mapData="mapData"
        name="enterpriseName"
        children="children"
        id="id"
        lngLat="lngLat"
      ></GMap>
    </template>
  </div>
</template>

<script setup name="device">
  import StatusTip from '@/components/StatusTip/index.vue';
  import Tree from './components/tree/index.vue';
  import GMap from './components/map/index.vue';
  import res from './components/tree/data';
  import { shallowRef, ref, onUnmounted, reactive } from 'vue';
  const pageTip = reactive({
    show: true,
    status: 0
  });
  let resData = [];
  let mapData = [];
  const checkedKeys = ref([]);
  const selectedKeys = ref([]);
  /** 监听tree的勾选数据 */
  const handleChecked = keys => {
    checkedKeys.value = keys;
  };
  /** 监听tree选中的数据 */
  const handleSelected = keys => {
    selectedKeys.value = keys;
  };
  /** 扁平化数据 */
  const generateFlat = (data, _children) => {
    const arr = [];
    for (let i = 0; i < data.length; i++) {
      const node = data[i];
      if (node[_children]) {
        let result = generateFlat(node[_children]);
        arr.push(...result);
      } else {
        arr.push(node);
      }
    }
    return arr;
  };
  setTimeout(() => {
    pageTip.show = true;
    let { code, data } = res;
    if (code == 200) {
      if (data?.length) {
        resData = data;
        mapData = generateFlat(data, 'children');
        pageTip.show = false;
      } else {
        pageTip.status = 1;
      }
    } else {
      pageTip.status = 2;
    }
  }, 100);
</script>

<style lang="less" scoped>
  .deviceWrap {
    display: flex;
    padding: 24px;
    height: 100%;
    .tree {
      width: 240px;
      margin-right: 24px;
    }
    .mapComponent {
      flex: 1;
    }
  }
</style>
